<template>
  <div style="padding-top:30px;">
    <el-form label-width="100px" :model="goods" ref="add_goods" :rules="rules">
      <el-form-item label="商品名称" prop="goods_name">
        <el-input placeholder="商品名称" v-model="goods.goods_name" />
      </el-form-item>
      <el-form-item label="商品价格" prop="goods_price">
        <el-input placeholder="商品价格" v-model="goods.goods_price" />
      </el-form-item>
      <el-form-item label="商品数量" prop="goods_number">
        <el-input placeholder="商品数量" v-model="goods.goods_number" />
      </el-form-item>
      <el-form-item label="商品重量" prop="goods_weight">
        <el-input placeholder="商品重量" v-model="goods.goods_weight" />
      </el-form-item>
      <el-form-item label="商品分类">
        <el-cascader v-model="goods.goods_cat" :options="options" :props="{label:'cat_name',value:'cat_id'}"></el-cascader>
      </el-form-item>
      <el-form-item label="商品图片">
         <el-upload
          action="https://www.liulongbin.top:8888/api/private/v1/upload"
          list-type="picture-card"
          :headers="{Authorization:$store.state.admin_token}"
          :on-success="uploadSuccess"
        >
          <i class="el-icon-plus"></i>
  </el-upload>
      </el-form-item>
      <el-form-item label="商品介绍">
         <quill-editor ref="myTextEditor" v-model="goods.goods_introduce" :options="editorOption" style="height:200px;"></quill-editor>
        <!-- <el-input placeholder="商品介绍" v-model="goods.goods_introduce" /> -->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addGoods()">添加商品</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  name: "",
   components: {
        quillEditor
    },
  data() {
    return {
      goods: {
        goods_name: "",
        goods_cat: "",
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        goods_introduce: "",
        pics: ""
      },
      //富文本编辑绑定得属性配置
      editorOption:{
        placeholder:'编辑商品简介'
      },
      rules: {
        goods_name: [
          { required: true, message: "商品名称不能为空", trigger: "blur" }
        ],
        goods_price: [
          { required: true, message: "商品价格不能为空", trigger: "blur" }
        ],
        goods_number: [
          { required: true, message: "商品数量不能为空", trigger: "blur" }
        ],
        goods_weight: [
          { required: true, message: "商品重量不能为空", trigger: "blur" }
        ]
      },
      // options: [
      //   {
      //     label: "北京",
      //     value: 1,
      //     children: [
      //       {
      //         label: "昌平区",
      //         value: 2
      //       },
      //       {
      //         label: "延庆区",
      //         value: 3,
      //         children: [
      //           {
      //             label: "哈哈",
      //             value: 4
      //           }
      //         ]
      //       }
      //     ]
      //   }
      // ]
    };
  },
  mounted() {
     this.getCate()
  },
  methods: {
      //获取商品分类得方法
    getCate(){
      let url = this.$store.state.baseUrl; //请求接口的基地址
      this.$axios.get(`${url}categories`).then(res=>{
        console.log(res);
        this.options = res.data;
        
      })
    },
    addGoods() {
      this.$refs["add_goods"].validate(check => {
        if (check) {
            console.log(this.goods.goods_cat)
         this.goods.goods_cat = this.goods.goods_cat.join(",");
          console.log(this.goods);
                  let url = this.$store.state.baseUrl; //请求接口的基地址
          this.$axios.post(`${url}goods`,this.goods).then(res=>{
              console.log(res);
              if(res.meta.status == 201){
                  this.$message.success("创建商品成功");
              }else{
                  this.$message.error(res.meta.msg);
              }
              this.$router.push("/admin/goods");
          })
        } else {
          return false;
        }
      });
    },
    // 文件上传触发方法
    uploadSuccess(res){
        console.log(res);
        this.goods.pics = res.data.tmp_path;
    }
  },
  computed: {},
  watch: {}
};
</script>

<style lang="scss">
</style>